<template>
  <view class="sales-performance-page" style="background: linear-gradient(to bottom, #f5f9ff, #e6f0ff); min-height: 100vh;">
    <!-- 标题 -->
    <view style="padding: 15px;">
      <text style="font-size: 18px; font-weight: bold; display: block; text-align: center;">销售业绩</text>
    </view>

    <!-- 业绩走势 -->
    <view style="background-color: #fff; margin: 15px; border-radius: 12px; padding: 15px; box-shadow: 0 2px 8px rgba(0,0,0,0.05);">
      <text style="font-size: 16px; font-weight: bold; display: block; margin-bottom: 15px;">业绩走势</text>
      
      <!-- 折线图区域 -->
      <view style="height: 200px; position: relative; margin-bottom: 15px;">
        <!-- 这里应该是图表实现，以下是模拟图表 -->
        <view style="position: absolute; bottom: 0; left: 0; right: 0; height: 1px; background-color: #eee;"></view>
        <view style="position: absolute; bottom: 50%; left: 0; right: 0; height: 1px; background-color: #eee;"></view>
        <view style="position: absolute; top: 0; left: 0; right: 0; height: 1px; background-color: #eee;"></view>
        
        <!-- 模拟数据点 -->
        <view style="position: absolute; bottom: 30%; left: 15%; width: 6px; height: 6px; background-color: #1a73e8; border-radius: 50%;"></view>
        <view style="position: absolute; bottom: 60%; left: 35%; width: 6px; height: 6px; background-color: #1a73e8; border-radius: 50%;"></view>
        <view style="position: absolute; bottom: 45%; left: 55%; width: 6px; height: 6px; background-color: #1a73e8; border-radius: 50%;"></view>
        <view style="position: absolute; bottom: 70%; left: 75%; width: 6px; height: 6px; background-color: #1a73e8; border-radius: 50%;"></view>
        
        <!-- 连接线 -->
        <view style="position: absolute; bottom: 30%; left: 15%; width: 20%; height: 2px; background-color: #1a73e8; transform-origin: left; transform: rotate(15deg);"></view>
        <view style="position: absolute; bottom: 45%; left: 35%; width: 20%; height: 2px; background-color: #1a73e8; transform-origin: left; transform: rotate(-8deg);"></view>
        <view style="position: absolute; bottom: 55%; left: 55%; width: 20%; height: 2px; background-color: #1a73e8; transform-origin: left; transform: rotate(12deg);"></view>
        
        <!-- 当前值标记 -->
        <view style="position: absolute; top: 20%; right: 20%; background-color: #f0f7ff; padding: 5px 10px; border-radius: 4px;">
          <text style="font-size: 12px; color: #1a73e8;">销售业绩</text>
          <text style="font-size: 14px; color: #1a73e8; font-weight: bold; display: block;">￥35.09</text>
        </view>
        
        <!-- X轴标签 -->
        <view style="position: absolute; bottom: -20px; left: 15%; transform: translateX(-50%);">
          <text style="font-size: 10px; color: #999;">10.1</text>
        </view>
        <view style="position: absolute; bottom: -20px; left: 35%; transform: translateX(-50%);">
          <text style="font-size: 10px; color: #999;">10.10</text>
        </view>
        <view style="position: absolute; bottom: -20px; left: 55%; transform: translateX(-50%);">
          <text style="font-size: 10px; color: #999;">10.20</text>
        </view>
        <view style="position: absolute; bottom: -20px; left: 75%; transform: translateX(-50%);">
          <text style="font-size: 10px; color: #999;">10.31</text>
        </view>
      </view>
    </view>

    <!-- 销售明细 -->
       <view style="background-color: #fff; margin: 15px; border-radius: 12px; padding: 15px; box-shadow: 0 2px 8px rgba(0,0,0,0.05);">
         <view style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px;">
           <text style="font-size: 16px; font-weight: bold;">销售明细</text>
           <!-- 月份选择按钮 -->
           <picker mode="selector" :range="months" @change="monthChange" range-key="name">
             <view style="display: flex; align-items: center;">
               <text style="font-size: 14px; color: #666; margin-right: 5px;">{{currentMonth}}</text>
               <view style="width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid #666;"></view>
             </view>
           </picker>
         </view>
      
      <!-- 订单列表 -->
      <view v-for="(item, index) in orders" :key="index" style="margin-bottom: 15px; padding-bottom: 15px; border-bottom: 1px solid #f5f5f5;">
        <navigator 
                v-for="(item, index) in orders" 
                :key="index" 
                url="/pages/b/manager/04/order_detail" 
                style="background-color: #fff; border-radius: 8px; padding: 15px; margin-bottom: 15px;">
                
            <view style="display: flex; justify-content: space-between; margin-bottom: 8px;">
                <text style="font-size: 14px; color: #333;">订单-87297520848</text>
                <text style="font-size: 14px; color: #333; font-weight: bold;">1000.00</text>
            </view>
                
            <view style="display: flex; justify-content: space-between;">
                <text style="font-size: 12px; color: #999;">2023-10-03 18:10:23</text>
                <text style="font-size: 12px; color: #07c160;">交易成功</text>
            </view>
        </navigator>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
		months: [
        {name: '1月', value: '01'},
        {name: '2月', value: '02'},
        {name: '3月', value: '03'},
        {name: '4月', value: '04'},
        {name: '5月', value: '05'},
        {name: '6月', value: '06'},
        {name: '7月', value: '07'},
        {name: '8月', value: '08'},
        {name: '9月', value: '09'},
        {name: '10月', value: '10'},
        {name: '11月', value: '11'},
        {name: '12月', value: '12'}
      ],
      currentMonth: '10月',
      orders: [
        {}, {}, {}, {}, {} // 5个相同订单
      ]
    }
  },
    methods: {
      monthChange(e) {
        this.currentMonth = this.months[e.detail.value].name
        // 这里可以添加加载对应月份数据的逻辑
        console.log('选择月份:', this.currentMonth)
      }
    }
}
</script>

<style>
.sales-performance-page {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 
              Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
</style>